<script setup lang="ts">
import { ref } from 'vue'
import type { Component } from 'vue'
import { RouterLink } from 'vue-router'
import {
  ChevronBackOutline,
  ChevronForwardOutline,
  HomeOutline,
  InformationCircleOutline
} from '@vicons/ionicons5'

// 定义菜单项类型
interface MenuItem {
  title: string
  path: string
  name?: string
  icon: Component // 图标组件
}

// 控制侧边栏展开/收缩状态
const isSidebarCollapsed = ref(true)

// 切换侧边栏状态
const toggleSidebar = () => {
  isSidebarCollapsed.value = !isSidebarCollapsed.value
}

// 菜单项
const menuItems: MenuItem[] = [
  { title: '首页', path: '/', name: 'home', icon: HomeOutline },
  { title: '关于', path: '/about', name: 'about', icon: InformationCircleOutline }
].filter(item => {
  // 过滤掉不需要在菜单中显示的路由，例如登录页
  return item.name !== 'login'
})

// 暴露给父组件使用的属性和方法
defineExpose({
  isSidebarCollapsed
})
</script>

<template>
  <div class="left-side" :class="{ collapsed: isSidebarCollapsed }">
    <nav class="menu">
      <RouterLink v-for="item in menuItems" :key="item.path" :to="item.path" class="menu-item" active-class="active">
        <component :is="item.icon" class="menu-icon" />
        <span class="menu-text" v-if="!isSidebarCollapsed">{{ item.title }}</span>
      </RouterLink>
    </nav>

    <!-- 折叠/展开按钮 -->
    <button class="toggle-button" @click="toggleSidebar">
      <ChevronBackOutline v-if="!isSidebarCollapsed" />
      <ChevronForwardOutline v-else />
    </button>
  </div>
</template>

<style scoped>
.left-side {
  width: var(--side-nav-width);
  background-color: #fff;
  padding: 0 0 20px 0;
  box-shadow: 1px 0 5px rgba(0, 0, 0, 0.1);
  transition: width 0.3s ease;
  position: relative;
  height: 100%;
}

.left-side.collapsed {
  width: var(--side-nav-width-collapsed);
}

.menu {
  list-style: none;
  margin-bottom: 40px;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
  transition: background-color 0.3s;
  height: var(--side-nav-menu-item-height);
}

.menu-item:hover {
  background-color: var(--side-nav-active-bg-color);
}

.menu-item.active {
  background-color: var(--side-nav-active-bg-color);
  color: var(--side-nav-active-color)
}

.menu-icon {
  flex-shrink: 0;
  width: var(--side-nav-icon-size);
  height: var(--side-nav-icon-size);
}

.menu-text {
  margin-left: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toggle-button {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.toggle-button:hover {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
  color: white;
}

.left-side.collapsed .toggle-button {
  transform: translateX(-50%);
}
</style>